<template>
  <div class="app-container">
    <div class="filter-container">
      <com-select
        v-model="listQuery.tableId"
        :url="tableSelectUrl"
        placeholder="请选择数据表"
        style="width: 120px;"
      />
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button
        v-if="isP('GenFieldAdd')"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-plus"
        @click="openDialogFieldForm(false)"
      >新增
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        type="index"
        width="50"
      />
      <!-- <el-table-column
        prop="tablename"
        label="数据表名"
        width="100"
      />-->
      <el-table-column
        prop="fieldcode"
        label="字段代码"
        width="140"
      />
      <el-table-column
        prop="fieldname"
        label="字段名称"
        width="120"
      />
      <el-table-column
        prop="type"
        label="字段类型"
        width="100"
        :formatter="fieldTypeFormatter"
      />
      <el-table-column
        prop="length"
        label="字段长度"
        width="100"
      />
      <el-table-column
        prop="inputLength"
        label="输入长度"
        width="100"
      />
      <el-table-column
        prop="point"
        label="小数位数"
        width="100"
      />
      <el-table-column
        prop="isBlank"
        label="是否为空"
        width="100"
        :formatter="isBlankFormatter"
      />
      <el-table-column
        prop="isListField"
        label="是否列表字段"
        width="120"
        :formatter="isListFieldFormatter"
      />
      <el-table-column
        prop="isSearchField"
        label="是否查询字段"
        width="120"
        :formatter="isSearchFieldFormatter"
      />
      <el-table-column
        prop="displayOrder"
        label="排序"
        width="100"
      />
      <el-table-column align="center" label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            v-if="isP('GenFieldUpdate')"
            style="margin-left: 10px"
            type="primary"
            size="mini"
            @click="openDialogFieldForm(true,scope.row)"
          >修改
          </el-button>
          <el-button
            v-if="isP('GenFieldDelete')"
            style="margin-left: 10px"
            type="danger"
            size="mini"
            @click="handleDelete(scope)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出框新增table -->
    <el-dialog title="字段内容" :visible.sync="dialogFieldFormVisible">
      <el-form
        ref="fieldForm"
        :model="fieldForm"
        :rules="rules"
        label-position="right"
        label-width="100px"
        style="width: 600px; margin-left:20px;"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="字段代码" prop="fieldcode">
              <el-input v-model="fieldForm.fieldcode" maxlength="40" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段描述" prop="fieldname">
              <el-input v-model="fieldForm.fieldname" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="字段类型" prop="type">
              <el-select v-model="fieldForm.type" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in fieldTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否可以为空" prop="isBlank">
              <el-select v-model="fieldForm.isBlank" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in yesNoOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="长度" prop="length">
              <el-input v-model="fieldForm.length" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小数位数" prop="point">
              <el-input v-model="fieldForm.point" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="输入长度" prop="inputLength">
              <el-input v-model="fieldForm.inputLength" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否列表字段" prop="isListField">
              <el-select v-model="fieldForm.isListField" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in yesNoOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否查询字段" prop="isSearchField">
              <el-select v-model="fieldForm.isSearchField" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in yesNoOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="列表宽度" prop="listWidth">
              <el-input v-model="fieldForm.listWidth" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对齐方式" prop="listAlign">
              <el-select v-model="fieldForm.listAlign" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in listAlignOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="排序" prop="displayOrder">
              <el-input v-model="fieldForm.displayOrder" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogFieldFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveField">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listGenField, deleteGenField, addGenField, updateGenField } from '@/api/gen/field'
import msgUtil from '@/utils/msgUtil'
import { listGenTableCombo } from '@/api/common/common'
import PageUtil from '@/utils/PageUtil'
import ComboConst from '@/utils/ComboConst'
import comSelect from '@/components/common/comSelect'
import BaseUrl from '@/utils/BaseUrl'
// 定义table 的表单
const fieldForm = {
  id: null,
  tableId: null,
  fieldcode: null,
  fieldname: null,
  type: 1,
  length: 20,
  point: 0,
  isListField: 1,
  isSearchField: 1,
  isBlank: 1,
  displayOrder: 1,
  inputLength: 10,
  listAlign: 'left',
  listWidth: 100
}

export default {
  components: { comSelect },
  data() {
    return {
      tableSelectUrl: BaseUrl.API_SYS + '/common/combo/listGenTable?authorId=' + this.$route.query.authorId,
      authorId: this.$route.query.authorId,
      isEdit: false,
      fieldForm: fieldForm,
      fieldTypeOptions: ComboConst.fieldTypeOptions,
      yesNoOptions: ComboConst.yesNoOptions,
      dialogFieldFormVisible: false,
      listAlignOptions: ComboConst.listAlignAllOptions,
      list: null,
      listGenTableCombo: [],
      listLoading: false,
      listQuery: {
        tableId: parseInt(this.$route.query.tableId)
      },
      rules: {
        fieldcode: [{ required: true, trigger: 'blur', message: '字段代码不能为空' }],
        fieldname: [{ required: true, trigger: 'blur', message: '字段名称不能为空' }]
      }
    }
  },
  created() {
    // this.getGenTableCombo()// 数据表列表下拉框
    if (this.listQuery.tableIdId !== '') {
      this.listGenField()
    }
  },
  methods: {
    fieldTypeFormatter(row) {
      return PageUtil.formatValue(ComboConst.fieldTypeOptions, row.type)
    },
    isBlankFormatter(row) {
      return PageUtil.formatValue(ComboConst.yesNoOptions, row.isBlank)
    },
    isSearchFieldFormatter(row) {
      return PageUtil.formatValue(ComboConst.yesNoOptions, row.isSearchField)
    },
    isListFieldFormatter(row) {
      return PageUtil.formatValue(ComboConst.yesNoOptions, row.isListField)
    },
    // 获取所有用户
    getGenTableCombo() {
      listGenTableCombo({ authorId: this.$route.query.authorId }).then(response => {
        this.listGenTableCombo = response.data
      })
    },
    listGenField() {
      if (this.listQuery.tableId === '') {
        msgUtil.error2('请选择数据表')
        return
      }

      this.listLoading = true
      listGenField(this.listQuery).then(response => {
        this.list = response.data
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
      // localStorage.setItem('GenFieldQuery', JSON.stringify(this.listQuery))
    },
    // 按钮查询
    handleFilter() {
      this.listGenField()
    },
    // 删除
    handleDelete({ $index, row }) {
      msgUtil.confirm('确认删除配置?').then(async() => {
        await deleteGenField({ id: row.id })
        msgUtil.success2('删除成功!')
        this.listGenField()
      })
    },
    // 查看字段明细
    handleViewField({ $index, row }) {

    },
    // 打开fieldform窗口
    openDialogFieldForm(isEdit, row) {
      this.isEdit = isEdit
      if (isEdit) {
        this.fieldForm = row
        this.dialogFieldFormVisible = true
      } else {
        this.dialogFieldFormVisible = true
        this.$refs.fieldForm.resetFields()
      }
    },
    // 保存数据表配置
    saveField() {
      if (this.listQuery.tableId === '') {
        msgUtil.error2('请选择数据表')
        return
      }
      console.log('align:' + this.fieldForm.listAlign)
      this.$refs.fieldForm.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            this.fieldForm.tableId = this.listQuery.tableId
            updateGenField(this.fieldForm).then(response => {
              msgUtil.success()
              this.dialogFieldFormVisible = false
              this.listGenField()
            })
          } else {
            this.fieldForm.tableId = this.listQuery.tableId
            addGenField(this.fieldForm).then(response => {
              msgUtil.success()
              this.dialogFieldFormVisible = false
              this.listGenField()
            })
          }
        }
      })
    }
  }
}
</script>
